<template>
  <div id="Header" :class="[name=='home'?'active':'']">
    <router-link v-if=" name=='home'" to="/Classify">
      <span class="fa fa-navicon fa-2x ico"></span>
    </router-link>
    <span @click="goback" v-else class="fa fa-angle-left fa-2x ico"></span>
    <div class="title">
      <div v-if="name" class="title_txt">
        <div v-if="name=='home'" class="search">
          <router-link to="/Search">
            <span class="fa fa-search fa-lg"></span>
          </router-link>
        </div>
        <div v-else-if="name=='ClassifyList'" class="searchs">
          <router-link to="/Search">
            <span class="fa fa-search fa-lg"></span>
            请输入关键字
          </router-link>
        </div>
        <div v-else-if="name=='listDetails'" class="listDetails">
          <ul>
            <li>
              <router-link to="">商品</router-link>
              <router-link to="">平价</router-link>
              <router-link to="">详情</router-link>
              <router-link to="">推荐</router-link>
            </li>
          </ul>
        </div>
        <div v-else>{{name}}</div>
      </div>

    </div>
    <div class="hidemenu">
      <router-link to="My" v-if="name=='home'" class="fa fa-user fa-2x ico"></router-link>
      <img v-else @click="show=!show" src="../../static/image/ico/省略.png" alt="" srcset="">
      <div v-show="show" class="menu">
        <ul>
          <li>
            <router-link to="/"><img src="../../static/image/ico/首页-选中.png">首页</router-link>
          </li>
          <li>
            <router-link to="/Classify"><img src="../../static/image/ico/分类搜索.png" alt="" srcset="">分类搜索</router-link>
          </li>
          <li>
            <router-link to="/ShopCar"><img src="../../static/image/ico/购物车.png" alt="" srcset="">购物车</router-link>
          </li>
          <li>
            <router-link to="/My"><img src="../../static/image/ico/我的.png" alt="" srcset="">个人中心</router-link>
          </li>
          <li>
            <router-link to="/"><img src="../../static/image/ico/痕迹.png" alt="" srcset="">浏览记录</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Popup } from 'mint-ui'

Vue.component(Popup.name, Popup)
export default {
  name: 'Header',
  props: ['name'],
  data () {
    return {
      show: false,
      observe: ''
    }
  },
  methods: {
    goback () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
#Header {
  position: fixed;
  top: 0;
  display: flex;
  height: 100px;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgb(200, 200, 200);
  padding: 20px 3%;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  .title {
    width: 75%;
    font-size: 32px; /*px*/
    .title_txt {
      text-align: center;
      .listDetails {
        ul {
          li {
            a {
              padding: 0 15px;
            }
          }
        }
      }
    }
    .search {
      position: relative;
      span {
        position: absolute;
        left: 25px;
        top: 30px;
        transform: translateY(-50%);
      }
      input {
        font-size: 24px; /*px*/
        background: rgba(200, 200, 200, 0.6);
        width: 100%;
        height: 60px;
        border-radius: 30px;
        padding: 0 0 0 70px;
        margin: 0;
      }
    }
    .searchs {
      a {
        padding: 0 0 0 100px;
        text-align: left;
        line-height: 60px;
        position: relative;
        display: block;
        width: 100%;
        height: 60px; /*px*/
        background: rgba(235, 235, 235, 1);
        border-radius: 30px;
        span {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 20px;
        }
      }
    }
  }
  .ico {
    height: 60px;
    display: flex;
    align-items: center;
  }
  .hidemenu {
    position: relative;
    img {
      height: 32px; /*px*/
      vertical-align: middle;
    }
    .menu {
      border-radius: 15px;
      background: rgb(0, 0, 0, 0.8);
      position: absolute;
      top: 30px;
      right: 0;
      ul {
        font-size: 24px; /*px*/
        width: 200px;
        li {
          padding: 15px;
          border-bottom: 1px solid rgba(200, 200, 200, 0.6);
          a {
            display: flex;
            align-items: center;
            color: rgba(255, 255, 255, 1);
            img {
              width: 32px;
              margin: 0 10px 0 0;
            }
          }
        }
      }
    }
  }
}
.active {
  background: rgba(202, 31, 31, 0.9) !important;
  .ico {
    color: rgba(255, 255, 255, 1) !important;
  }
  .search {
    a {
      display: block;
      background: rgba(255, 255, 255, 1);
      width: 100%;
      height: 60px;
      border-radius: 30px;
    }
  }
}
</style>
